/**
 * This file is part of MolView (http://molview.org)
 * Copyright (c) 2014, 2015 Herman Bergwerf
 *
 * MolView is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * MolView is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with MolView.  If not, see <http://www.gnu.org/licenses/>.
 */

@import (reference) "vars";
@import (reference) "global";

#menu
{
	display: block;
	position: absolute;
	margin: 0;
	padding: 0;
	height: @menubar-height + 1;

	overflow: hidden;
	overflow-x: auto;

	.no-select;
}

#menu-bar
{
	position: absolute;
	top: 0;
	min-width: 100%;
	background: @menu-bar-bg;
	border-bottom: 1px solid @contrast;
	overflow: hidden;
}

.menu-open
{
	height: 100% !important;
}

.menu-open > #menu-bar
{
	overflow: visible;
}

#main-menu, #layout-menu, .dropdown, .menu-item, .menu-header, .menu-divider
{
	margin: 0;
	padding: 0;
	list-style: none;
}

.dropdown
{
	position: relative;
	margin: 0;
	padding: 0;
}

.dropdown-toggle
{
	z-index: 1;
	position: relative;
	display: block;
	margin: 0;
	padding: 10px 15px;
	height: 20px;
	line-height: 20px;
}

.dropdown-menu
{
	visibility: hidden;
	position: absolute;
	margin: -1px 0 0 0;
	padding: 5px 0;
	min-width: 200px;

	overflow-x: hidden;
	overflow-y: auto;
}

.dropdown-left
{
	right: 0;
}

.dropdown-compact > .menu-item > a
{
	padding: 5px 15px;
}

.dropdown-compact > .menu-item > a:before
{
	display: none;
}

.menu-header
{
	display: block;
	cursor: default;
	margin-top: 10px;
	margin-bottom: 5px;
	padding: 3px 10px;
	line-height: 15px;
	white-space: nowrap;
}

.menu-item > a
{
	display: block;
	line-height: 20px;
	white-space: nowrap;
}

.dropdown.open
{
	z-index: 2;
}

/*
Only hide other dropdowns while displaying
at least one other dropdown in order to:
- prevent persistent hover style after all dropdowns are dismissed
- hide scrollbar for hidden dropdown-menus
*/
.menu.open .dropdown:not(.open) > .dropdown-menu
{
	display: none;
}

.dropdown.open > .dropdown-menu
{
	visibility: visible;
}

/* search form */
#search
{
	margin: 0 5px;
	background: @search-bar-bg;
}


#search > .input-wrapper > input, #search > .input-wrapper > button
{
	background: @search-bar-bg;
}

#search-input
{
	width: 300px;
	font-family: 'Open Sans', sans-serif;
}

#search-dropdown
{
	display: inline-block;
}

#search-dropdown > .dropdown-toggle
{
	border-color: transparent;
}

#search-dropdown > .dropdown-toggle:after
{
	margin: 0;
	color: @foreground;
	content: '\f0d7';
}

/* layout menu */
#layout-menu
{
	font-size: 0;
}

#layout-menu > a
{
	display: inline-block;
	margin: 0;
	padding: 0;
	width: 112px;
	height: 63px;

	opacity: 0.7;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

@media all and (min-width: 720px)
{
	#layout-menu > a
	{
		width: 160px;
		height: 90px;
	}
}

#action-layout-model { background-image: url(../img/layout/model.svg); }
#action-layout-sketcher { background-image: url(../img/layout/sketcher.svg); }
#action-layout-vsplit { background-image: url(../img/layout/vsplit.svg); }
#action-layout-hsplit { background-image: url(../img/layout/hsplit.svg); }
